<template>
	<xn-form-container title="手机号过滤上传" :width="400" :visible="visible" :destroy-on-close="true" @close="onClose">
		<a-row :gutter="24">
			<a-col :span="24">
				<a-spin :spinning="uploadLoading">
					<a-upload-dragger
						ref="uploadRef"
						:before-upload="handleBeforeUpload"
						v-model:file-list="fileList"
						:show-upload-list="true"
						:headers="headers"
						accept=".xlsx, .xls, .csv"
						:auto-upload="false"
						multiple
					>
						<p class="ant-upload-drag-icon">
							<inbox-outlined></inbox-outlined>
						</p>
						<p class="ant-upload-text">单击或拖动文件到此区域进行上传</p>
						<p class="ant-upload-hint">支持单个上传</p>
					</a-upload-dragger>
					<a-button type="link" @click="download">点击下载手机号过滤上传模版</a-button>
					<a-divider />
					<a-form-item label="所属项目" name="projectCode">
						<ProjectSelect v-model:value="projectCode" />
					</a-form-item>
				</a-spin>
			</a-col>
		</a-row>
		<template #footer>
			<a-button class="xn-mr8" @click="onClose">关闭</a-button>
			<a-button type="primary" @click="onSubmit">保存</a-button>
		</template>
	</xn-form-container>
</template>
<script setup>
	import tool from '@/utils/tool'
	import fileApi from '@/api/tjzy/file/fileApi'
	import downloadUtil from '@/utils/downloadUtil'
	import { message } from 'ant-design-vue'
	import phoneFilterApi from '@/api/tjzy/phone/filter/phoneFilterApi'
	import ProjectSelect from '@/components/Tjzy/Project/index.vue'

	const emit = defineEmits({ successful: null })
	const headers = ref({
		token: tool.data.get('TOKEN')
	})
	const visible = ref(false)
	const uploadLoading = ref(false)
	const fileList = ref([])
	const uploadRef = ref()
	const projectCode = ref()
	// 打开抽屉
	const openUpload = () => {
		visible.value = true
	}
	// 关闭抽屉
	const onClose = () => {
		visible.value = false
		fileList.value = []
		projectCode.value = ''
		emit('successful')
	}
	const handleBeforeUpload = () => {
		console.log('beforeUpload')
		return false
	}
	const onSubmit = () => {
		console.log('onSubmit')
		console.log(projectCode)
		if (!projectCode.value) {
			message.error('项目代码不能为空，请输入有效的项目代码。')
			return
		}
		visible.value = false
		const fileData = new FormData()
		fileData.append('file', fileList.value[0].originFileObj)
		phoneFilterApi
			.importExcel(projectCode.value, fileData)
			.then(() => {
				emit('successful')
				message.success('批量导入成功') // 在这里显示成功消息
			})
			.finally(() => {
				uploadLoading.value = false
			})
		onClose()
	}
	const download = () => {
		// fileApi.download('手机号码过滤模板.xlsx').then((res) => {
		// 	downloadUtil.resultDownload(res)
		// })
		fileApi.download('案件导入模版250508165722786.xlsx').then((res) => {
			downloadUtil.resultDownload(res)
		})
	}
	defineExpose({
		openUpload
	})
</script>
